  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hobby</title>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/amazeui.css">
    <link rel="stylesheet" href="assets/css/amazeui.flat.css">
    <link rel="stylesheet" href="assets/css/amazeui.flat.min.css">
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="../css/common.css"> -->
    <link rel="stylesheet" href="css/hobby.css">
    <!-- <link rel="stylesheet" href="../css/loginframe.css"> -->
    <script src="js/jquery.js"></script>
    <script src="js/API/hobby.js"></script>
    <style>
        body{
            /* background-image: url("https://s2.loli.net/2022/06/22/CpJb1FRMXjeg7B8.jpg"); */
            background-image: linear-gradient(to right top, #99b2cc, #a2afcb, #aaacc9, #b2a9c4, #b9a7bf, #c1abc2, #c8aec5, #d0b2c7, #dcbcd4, #e8c6e2, #f3d0f0, #ffdbfe);
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            font-size: 20px;
        }
    </style>
  </head>
  <body>
    <!-- 用户偏好推荐 -->
  <div id="hobby" class="hobby hidden">
    <div style="text-align: center;margin-top: 10px;">
        <h1>请选择您感兴趣的领域</h1>
    </div>
    
    <div class="am-form-group" style="display:flex;justify-content:center;align-items:center;">
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputone" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:red ;margin-top:15px;">手机</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputtwo" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(211, 139, 30) ;margin-top:15px;">电脑</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputthree" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(221, 211, 30) ;margin-top:15px;">摄像</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputfour" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(26, 209, 66) ;margin-top:15px;">数码</p>
                </div>
            </label>
        </div>
    </div>
    <br>
    <div class="am-form-group" style="display:flex;justify-content:center;align-items:center;">
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputfive" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-radius fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(19, 198, 214) ;margin-top:15px;">电视</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputsix" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-radius fontsize am-text-default am-vertical-align-middle" style="background-color:rgb(35, 29, 213) ;margin-top:15px;">家居</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputseven" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-radius fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(206, 40, 198) ;margin-top:15px;">单车</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputeight" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-radius fontsize am-text-default am-vertical-align-middle" style="background-color:rgb(227, 75, 121) ;margin-top:15px;">百货</p>
                </div>
            </label>
        </div>
    </div>
    <br>
    <div class="am-form-group" style="display:flex;justify-content:center;align-items:center;">
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputnine" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;" onchange="">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(55, 132, 119) ;margin-top:15px;">书籍</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputten" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(132, 204, 49) ;margin-top:15px;">玩具</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputeleven" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(120, 32, 221) ;margin-top:15px;">体育</p>
                </div>
            </label>
        </div>
        <div class="am-vertical-align">
            <label class="am-checkbox-inline am-input-lg labelleft left" style=" vertical-align:middle;display:inline-block;">
                <div class=" am-vertical-align-middle">
                    <input id="inputtwelve" type="checkbox" class="labelinput am-vertical-align-middle" style="margin-top:17px;">
                    <p class="am-badge am-badge-primary am-round fontsize am-text-default am-vertical-align-middle"  style="background-color:rgb(64, 164, 226) ;margin-top:15px;">服饰</p>
                </div>
            </label>
        </div>
    </div>
    <br>
    <div style="display:flex;justify-content:center;align-items:center;">
        <button id="xuanzebtn" type="button" class="am-btn am-btn-default am-round am-btn-lg"  style="background-color:red ;">我选好啦</button>
    </div>
</div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
  